<template>
  <div>
    <a-layout>
      <a-layout-sider :style="siderStyle">
        <Sider></Sider>
      </a-layout-sider>
      <a-layout>
        <a-layout-header class="my-custom-header" :style="headerStyle">
          <Header></Header>
        </a-layout-header>
        <a-layout-content :style="contentStyle">
          <RouterView />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<script lang="ts" setup>
    import type { CSSProperties } from 'vue';
    import Sider from "@/components/Sider.vue";
    import Header from "@/components/Header.vue";
    import { RouterView } from 'vue-router'
    const headerStyle: CSSProperties = {
      color: '#fff',
      height: 64,
      padding: 0,
      backgroundColor: 'rgb(255,255,255)',
      boxShadow: '0px 2px red'
    };

    const contentStyle: CSSProperties = {
      height: 'calc(100vh - 64px)',
      padding: '18px',
      backgroundColor: '#fff'
    };

    const siderStyle : CSSProperties = {
    }


</script>

<style>
</style>
